import React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux'
import actions from '../store/actions/home'
const Home = ({ bannerList, proList, getBannerList, getProList }) => {
  useEffect(() => {
    getBannerList()
    getProList({ count: 2, limitNum: 5 })
  }, [getBannerList, getProList])
  return (
    <div>
      <h1>home</h1>
      <ul>
        {
          bannerList && bannerList.map(item => (
            <img src = { item.img } key = { item.bannerid } alt="" style={{ height: 60 }}></img>
          ))
        }
      </ul>

      <ul>
        {
          proList && proList.map(item => (
            <li key = { item.proid }>{ item.proname }</li>
          ))
        }
      </ul>
    </div>
  );
};

export default connect((state) => {
  return {
    bannerList: state.home.bannerList,
    proList: state.home.proList
  }
}, (dispatch) => {
  return {
    getBannerList () {
      dispatch(actions.getBannerListAction)
    },
    getProList (params) {
      dispatch(actions.getProListAction(params))
    }
  }
})(Home);